<template>
  <div class="login">
    <div class="login_content">
      <div class="login_img">
        <img src="../../assets/康.jpg" alt />
      </div>

      <el-form ref="loginForm" :model="loginForm" :rules="rules">
        <el-form-item prop="username">
          <el-input v-model="loginForm.name">
            <i slot="prefix" class="el-icon-user-solid"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.pass">
            <i slot="prefix" class="el-icon-lock"></i>
          </el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
          <el-button type="info" @click="resetForm('loginForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      loginForm: {
        name: "admin",
        pass: "123456",
        
      },
      rules: {
        name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 5,
            max: 18,
            message: "长度在 5 到 20 个字符",
            trigger: "blur"
          }
        ],
        pass: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 5,
            max: 8,
            message: "长度在 6 到 15 个字符",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {},
  mounted() {},
  methods: {
    // loginIn() {
    //   this.$refs.loginForm.validate(async valid => {
    //     console.log(valid);
    //     if (!valid) return;
    //     const res = await login(this.loginForm);
    //     console.log("await结果：", res);
    //     localStorage.setItem("token", res.token);
    //     this.$router.push({ path: "/about" });
    //   });
    // },
submitForm(loginForm) {
      this.$refs[loginForm].validate((valid) => {
        //   console.log(valid);
          
        if (valid) {
          this.$axios
            .post("login", {
              username: this.loginForm.name,
              password: this.loginForm.pass,
            })
            .then((res) => {
              console.log(res);
              if (res.data.meta.status == 200) {
                this.$message({
                  message: res.data.meta.msg,
                  type: "success",
                });
                localStorage.setItem('token',res.data.data.token)
                this.$router.push('/About')
              } else {
                this.$message({
                  message: res.data.meta.msg,
                  type: "error",
                });
              }
            });
        }
      });
    },





    //重置表单
    resetForm(loginForm) {
      this.$refs[loginForm].resetFields();
      
    }
  }
};
</script>

<style scoped lang='scss'>
.login {
  width: 100%;
  height: 950px;
  background-color: #2b4b6b;
  .login_content {
    width: 450px;
    height: 304px;
    border-radius: 3px;
    top: 50%;
    background-color: #fff;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px #ddd;
  }
  .login_img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    padding: 10px 10px;
    background-color: white;
    border: 1px solid #efefef;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px #ddd;
  }
  .login_img img {
    width: 100%;
    background-color: #efefef;
    height: 100%;
    border-radius: 50%;
  }

  .el-form {
    margin-top: 115px;
    padding: 0 20px;
  }
  /deep/ {
    .el-input__inner {
      padding: 0 30px;
    }
  }
  .iconfont {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0px;
    left: 5px;
    z-index: 999;
  }
  .btns {
    display: flex;
    justify-content: flex-end;
  }
}
</style>